<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--bootstrap3-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">



</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">教师信息</h3>
    </div>
    <div class="panel-body">
        <div style="display:inline-block;">

            <div style="float:left;padding:6px;">
                <span>姓名：</span>
            </div>
            <div style="float:left;">
                <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入姓名" />
            </div>
            <div style="float:left;padding:6px;">
                <span>性别：</span>
            </div>
            <div style="float:left;">
                <select id="gender" class="form-control" style="width:87px;">
                    <option value="">请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div style="float:left;margin-left:20px;">
                <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
                </button>
                <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
                </button>
                <!-- Button trigger modal -->
                <!--                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">-->
                <!--                        <span class="glyphicon glyphicon-plus">-->
                <!--                        </span>新增-->
                <!--                    </button>-->
                <!--                    <button type="button" class="btn btn-danger"   onclick="batchDelete();">-->
                <!--                        <span class="glyphicon glyphicon-trash">-->
                <!--                        </span>批量删除-->
                <!--                    </button>-->
                <!--                    <button type="button" id="upload" class="btn btn-info">-->
                <!--                        批量导入-->
                <!--                    </button>-->

            </div>
        </div>
    </div>
</div>
<div class="box1">

    <table class="table table-bordered table-striped" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ModalLabel">文件上传</h4>
            </div>
            <div class="modal-body">
                <input id="f_upload" type="file"  name="file"/>
            </div>

        </div>
    </div>
</div>


<!-- 学生Modal -->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--    <div class="modal-dialog" role="document">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--                <h4 class="modal-title" id="myModalLabel">教师信息</h4>-->
<!--            </div>-->
<!--            <div class="modal-body">-->
<!--                <form id="formStudent">-->
<!--                    <input hidden="hidden" id="id" name="id">-->
<!--                    <div class="form-group">-->
<!--                        <label for="tno">教工号</label>-->
<!--                        <input type="text" class="form-control" id="tno" aria-describedby="emailHelp" placeholder="Enter tno" name="tno">-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="tname">姓名</label>-->
<!--                        <input type="text" class="form-control" id="tname" aria-describedby="emailHelp" placeholder="Enter tname" name="tname">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="sex">性别</label>-->
<!--                        <select class="form-control" id="sex" name="sex">-->
<!--                            <option value="男">男</option>-->
<!--                            <option value="女">女</option>-->
<!--                        </select>-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="tage">年龄</label>-->
<!--                        <input type="text" class="form-control" id="tage" aria-describedby="emailHelp" placeholder="Enter tage" name="tage">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="password">密码</label>-->
<!--                        <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="cname">课程名</label>-->
<!--                        <input type="text" class="form-control" id="cname" aria-describedby="emailHelp" placeholder="Enter cname" name="cname">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="prof">职称</label>-->
<!--                        <input type="text" class="form-control" id="prof" aria-describedby="emailHelp" placeholder="Enter prof" name="prof">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="sala">薪水</label>-->
<!--                        <input type="text" class="form-control" id="sala" aria-describedby="emailHelp" placeholder="Enter sala" name="sala">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="deptid">院系编号</label>-->
<!--                        <input type="text" class="form-control" id="deptid" aria-describedby="emailHelp" placeholder="Enter deptid" name="deptid">-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <label for="mid">专业编号</label>-->
<!--                        <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">-->
<!--                    </div>-->


<!--                </form>-->
<!--            </div>-->
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--                <button type="button" class="btn btn-primary" onclick="saveStudent();">-->
<!--                    <span class="glyphicon glyphicon-floppy-save"></span>-->
<!--                    保存-->
<!--                </button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->


<!--教师详情-->
<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">教师详情</h4>
            </div>
            <div class="modal-body">

                <table class="table11_6">
                    <tr>
                        <td> <span>教工号：</span> </td>
                        <td>
                            <input type="text" class="form-control form1" id="tno" aria-describedby="emailHelp" placeholder="Enter tno" name="tno" readonly="readonly">
                        </td>
                    </tr>
                    <tr>
                        <td> <span>姓名：</span></td>
                        <td>
                            <input type="text" class="form-control form1" id="tname" aria-describedby="emailHelp" placeholder="Enter tname" name="tname"  readonly="readonly">
                        </td>

                    </tr>
                    <tr>
                        <td> <span>性别：</span></td>
                        <td>
                            <input type="text" class="form-control form1" id="sex" aria-describedby="emailHelp" placeholder="Enter sex" name="sex"  readonly="readonly">
                        </td>
                    </tr>
                    <tr>
                        <td> <span>年龄：</span></td>
                        <td> <input type="text" class="form-control form1" id="tage" aria-describedby="emailHelp" placeholder="Enter tage" name="tage"  readonly="readonly"></td>
                    </tr>

                    <tr>
                        <td><span>课程名：</span></td>
                        <td> <input type="text" class="form-control form1" id="cname" aria-describedby="emailHelp" placeholder="cname" name="cname"  readonly="readonly"></td>
                    </tr>

                    <tr>
                        <td><span>职称：</span></td>
                        <td> <input type="text" class="form-control form1" id="prof" aria-describedby="emailHelp" placeholder="prof" name="prof"  readonly="readonly"></td>
                    </tr>

                    <tr>
                        <td><span>薪水·：</span></td>
                        <td> <input type="text" class="form-control form1" id="sala" aria-describedby="emailHelp" placeholder="sala" name="sala"  readonly="readonly"></td>
                    </tr>

                    <tr>
                        <td><span>院系编号·：</span></td>
                        <td> <input type="text" class="form-control form1" id="deptid" aria-describedby="emailHelp" placeholder="deptid" name="deptid"  readonly="readonly"></td>
                    </tr>

                    <tr>
                        <td><span>专业编号：</span></td>
                        <td> <input type="text" class="form-control form1" id="mid" aria-describedby="emailHelp" placeholder="mid" name="mid"  readonly="readonly"></td>
                    </tr>


                </table>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!--        <button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/teacherupload.js"></script>
<script src="/js/fileinput.min.js"></script>
<script src="/js/msg.js"></script>
<script>

    /**
     * 显示学生列表
     */
    function loadTable(){
        $("#stuTable").bootstrapTable({
            url: '/webapi/teacher/getbypage',
            striped:true, //设置为ture有隔行变色效果
            pagination:true,//设置为true会在底部显示分页条
            singleSelect: false,//设置为true将禁止多选
            pageSize:7,   //设置分页的每页条数
            pageList:[7],
            pageNumber:1, //设置了分页，首页页码
            uniqueId : "id", //每一行的唯一标识，一般为主键列
            clickToSelect: true,
            sortName: "id",
            sortOrder: "asc",
            onSort:function (name,order){

                console.log(name);
                console.log(order);
            },
            sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
            queryParams:function (params){
                let paraObj = {
                    size: params.limit,
                    page: params.offset/params.limit,
                    sort: params.sort,
                    direct: params.order,
                    tname:$("#searchName").val(),
                    sex: $("#gender").val()
                };
                return paraObj;
            },

            onLoadError:function (rs){
                console.log(rs)
                if (rs.code == 403){
                    window.location.href = "../../templates/login/user.html"
                }
            },
            responseHandler:function (res){
                console.log(res)
                return {
                    "total": res.data.total, // 总页数
                    "rows": res.data.rows    // 数据
                }
            },
            columns:[{
                align: "center",
                sortable: true,
                field: "id",
                title: "序号"
            },{
                align: "center",
                sortable: true,
                field: "tno",
                title: "教工号"
            },{
                align: "center",
                sortable: true,
                field: "tname",
                title: "姓名"
            },{
                align: "center",
                sortable: true,
                field: "sex",
                title: "性别"
            },{
                align: "center",
                sortable: true,
                field: "tage",
                title: "年龄"
            },{
                align: "center",
                sortable: true,
                field: "cname",
                title: "课程名"
            },{
                align: "center",
                sortable: true,
                field: "prof",
                title: "职称"
            },{
                align: "center",
                sortable: true,
                field: "sala",
                title: "薪水"
            },{
                align: "center",
                sortable: true,
                field: "deptid",
                title: "院系编号"
            },{
                align: "center",
                sortable: true,
                field: "mid",
                title: "专业编号"
            }
            ,{
                field: 'id',
                title: '操作',
                align: 'center',
                formatter: function(value,row,index){
                    // let e = "<a href='#' style='text-decoration: none;color: #0099CC;font-size: 14px' onclick='queryStudent("+row.id+");'>详情</a> "
                    // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
                    // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
                    // let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
                    //     "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
                    // let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
                    //     "<span class='glyphicon glyphicon-trash'></span>删除</button>"

                    let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='queryStudent("+row.id+");'>" +
                        "详情</button> "
                    return e  ;
                },width:250 //自定义修改，增加修改、删除标志
            }
            ],
            formatNoMatches: function (){
                return "没有相关的匹配结果";
            },
            formatLoadingMessage:function (){
                return "请稍等，正在加载中...";
            }
        })
    }

    function queryStudent(id){
        //查看按钮 显示模态框
        $("#detailModal").modal("show");

        $.ajax({
            url:'/webapi/teacher/get/'+id
        }).done(function (rs){
            console.log(rs)
            if (rs.code === 200){
                let data = rs.data
                $("#id").val(data.id);
                $("#tno").val(data.tno);
                $("#tname").val(data.tname);
                $("#sex").val(data.sex);
                $("#tage").val(data.tage);
                $("#cname").val(data.cname);
                $("#prof").val(data.prof);
                $("#sala").val(data.sala);
                $("#deptid").val(data.deptid);
                $("#mid").val(data.mid);


            }
        })
    }

    // /**
    //  * 批量删除
    //  */
    // function batchDelete(){
    //     let rows = $("#stuTable").bootstrapTable("getSelections");
    //     let len = rows.length;
    //     if(len == 0){
    //         alert("请选择要删除的行");
    //     }else{
    //         if(confirm("你确定删除"+len+"条内容吗？")){
    //             let arr = [];
    //             for (let i = 0;i < len;i++){
    //                 arr.push(rows[i].id);
    //             }
    //             $.ajax({
    //                 url: '/webapi/teacher/batchdelete/'+arr,
    //                 method: 'delete'
    //             }).done(function (rs){
    //                 if (rs.code == 200){
    //                     $("#stuTable").bootstrapTable("destroy");
    //                     loadTable();
    //                     message.showText("success","批量删除成功");
    //                 }
    //
    //             })
    //         };
    //
    //
    //     }
    //
    // }

    // /**
    //  * 删除学生
    //  */
    // function deleteStudent(id){
    //     if(confirm("您是否真的要删除该记录?")){
    //         $.ajax({
    //             url: '/webapi/teacher/delete/'+id,
    //             method: 'delete'
    //         }).done(function (rs){
    //             if (rs.code == 200){
    //                 message.showText("success","删除成功");
    //                 $("#stuTable").bootstrapTable("destroy");
    //                 loadTable();
    //             }
    //
    //         })
    //     }
    //
    // }

    // /**
    //  * 点击新增时给id赋值，以便判断做新增操作
    //  */
    // function preAdd(){
    //     $("#id").val(0);
    //     $("#tno").val("");
    //     $("#tname").val("");
    //     $("#sex").val("");
    //     $("#tage").val("");
    //     $("#password").val("");
    //     $("#cname").val("");
    //     $("#prof").val("");
    //     $("#sala").val("");
    //     $("#deptid").val("");
    //     $("#mid").val("");
    // }

    // // 修改之前获取学生信息
    // function editStudent(id){
    //     $('#myModal').modal('show')
    //     $.ajax({
    //         url:'/webapi/teacher/get/'+id
    //     }).done(function (rs){
    //         console.log(rs)
    //         if (rs.code == 200){
    //             let data = rs.data
    //             $("#id").val(data.id);
    //             $("#tno").val(data.tno);
    //             $("#tname").val(data.tname);
    //             $("#sex").val(data.sex);
    //             $("#tage").val(data.tage);
    //             $("#password").val(data.password);
    //             $("#cname").val(data.cname);
    //             $("#prof").val(data.prof);
    //             $("#sala").val(data.sala);
    //             $("#deptid").val(data.deptid);
    //             $("#mid").val(data.mid);
    //         }
    //     })
    // }

    // /**
    //  * 根据id判断是新增还是更新，判断之后做新增和更新操作
    //  */
    // function saveStudent(){
    //     let data = $("#formStudent").serialize();
    //     let id = $("#id").val();
    //     if (id < 1){
    //         //是新增
    //         $.ajax ({
    //             url:"/webapi/teacher/insert",
    //             method:"post",
    //             data:data
    //         }).done(function (rs) {
    //             console.log(rs)
    //             if (rs.code == 200){
    //                 $('#stuTable').bootstrapTable('destroy');
    //                 loadTable();
    //                 $('#myModal').modal('hide');
    //                 message.showText("success","新增成功");
    //             }
    //
    //         });
    //     } else {
    //
    //         //是更新
    //         $.ajax ({
    //
    //             url:"/webapi/teacher/update",
    //             method:"put",
    //
    //             data:data
    //
    //         }).done(function (rs) {
    //             if (rs.code == 200){
    //                 $('#stuTable').bootstrapTable('destroy');
    //                 loadTable();
    //                 $('#myModal').modal('hide');
    //                 message.showText("success","更新成功");
    //             }
    //         });
    //     }
    // }

    /**
     * 刷新数据
     */
    function resetList(){
        $("#searchName").val("");
        $("#gender").val("");
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
        message.showText("success","刷新成功");
    }
    function search(){
        $("#stuTable").bootstrapTable("destroy");
        loadTable();
    }

    $(function (){
        loadTable()
    })
</script>

</body>
</html>